<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="8">
					<a-form-item label="CAS" name="casNo">
						<a-input v-model:value.trim="searchFormState.casNo" placeholder="请输入CAS编号"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="名称" name="name">
						<a-input v-model:value.trim="searchFormState.name" placeholder="请输入名称"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="类型" name="state">
						<a-select v-model:value="searchFormState.classId" placeholder="请选择类型"
								  :options="storageTypeOptions" allowClear/>
					</a-form-item>
				</a-col>

				<a-col :span="8">
					<a-form-item label="形态" name="state">
						<a-select v-model:value="searchFormState.formId" placeholder="请选择形态"
								  :options="formTypeOptions" allowClear/>
					</a-form-item>
				</a-col>

				<a-col :span="6">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="resetForm()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
			:loading="uploadLoading"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()">
						<template #icon>
							<plus-outlined/>
						</template>
						新增
					</a-button>
					<a-button type="primary" ghost @click="exportTmpl()" :loading="exportLoading">模板下载</a-button>
					<a-upload name="file" :show-upload-list="false" :custom-request="uploadFile" accept=".xls,.xlsx">
						<a-button type="primary">
							<UploadOutlined/>
							导入
						</a-button>
					</a-upload>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'unit'">
					<a-tag v-if="record.unit === '0'" color="purple">毫升</a-tag>
					<a-tag v-if="record.unit === '1'" color="cyan">克</a-tag>
				</template>
				<template v-if="column.dataIndex === 'weighNeedFlag'">
					<a-tag v-if="record.weighNeedFlag === '0'" color="red">否</a-tag>
					<a-tag v-if="record.weighNeedFlag === '1'" color="green">是</a-tag>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="formRef.onOpen(record)">编辑</a>
						<a-divider type="vertical"/>
						<a-popconfirm title="确定要删除吗？" @confirm="deleteBizReagentClass(record)">
							<a-button type="link" danger size="small">
								删除
							</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="onSuccess"/>
</template>

<script setup name="reagentclass">
	import { message } from 'ant-design-vue'
	import Form from './form.vue'
	import bizReagentClassApi from '@/api/biz/bizReagentClassApi'
	import tool from '@/utils/tool'

	const table = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	let searchFormState = reactive({})
	const searchFormRef = ref()
	//导出loading
	const exportLoading = ref(false)
	//导入loading
	const uploadLoading = ref(false)
	const columns = [
		{
			title: 'CAS',
			dataIndex: 'casNo'
		},
		{
			title: '名称',
			dataIndex: 'reagentName'
		},
		{
			title: '类型',
			dataIndex: 'className'
		},
		{
			title: '形态',
			dataIndex: 'formName'
		},
		{
			title: '试剂瓶类型',
			dataIndex: 'bottleTypeName'
		},
		{
			title: '试剂单位',
			dataIndex: 'unit'
		},
		{
			title: '氧化还原类型',
			dataIndex: 'redoxClassName'
		},
		{
			title: '密度(g/ml)',
			dataIndex: 'density'
		},
		{
			title: '最大离柜时间',
			dataIndex: 'maxLimitLeave'
		},
		{
			title: '取还是否需要称重',
			dataIndex: 'weighNeedFlag'
		},
		{
			title: '误差最大值',
			dataIndex: 'maxErrorValue'
		}
	]
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: '150px'
	})
	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		return bizReagentClassApi.bizReagentClassPage(Object.assign(parameter, searchFormState)).then((data) => {
			return data
		})
	}
	//类型
	const storageTypeOptions = tool.dictList('REAGENT_STORAGE_TYPE')
	//形态
	const formTypeOptions = tool.dictList('REAGENT_FORM_TYPE')
	// 删除
	const deleteBizReagentClass = (record) => {
		let params =
			{
				id: record.id
			}
		bizReagentClassApi.bizReagentClassDelete(params).then(() => {
			message.success('删除成功')
			table.value.refresh(true)
		})
	}
	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.classId = null
		searchFormState.formId = null
		table.value.refresh(true)
	}

	const onSuccess = () => {
		table.value.refresh(true)
	}

	const exportTmpl = () => {
		exportLoading.value = true
		bizReagentClassApi.bizReagentClassExportTmpl().then((res) => {
			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' });
			const contentDisposition = res.headers['content-disposition']
			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
			const $link = document.createElement("a");
			$link.href = URL.createObjectURL(blob);
			var reg = /^["](.*)["]$/g
			$link.download = decodeURI(patt.exec(contentDisposition)[1].replace(reg, '$1'))
			$link.click();
			document.body.appendChild($link);
			document.body.removeChild($link); // 下载完成移除元素
			window.URL.revokeObjectURL($link.href); // 释放掉blob对象
		}).finally(() => {
			exportLoading.value = false
		})
	}

	const uploadFile = (data) => {
		uploadLoading.value = true
		const fileData = new FormData()
		fileData.append('file', data.file)
		bizReagentClassApi.bizReagentClassUpload(fileData).then((data) => {
			message.success('导入成功！共导入[' + data + ']条数据')
			table.value.refresh(false)
		}).finally(() => {
			uploadLoading.value = false
		})
	}
</script>
